import React, { PureComponent } from 'react';
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { Input, Modal, Row, Col } from 'antd';

const FormItem = Form.Item;
const tableSearchLayout = {
  labelCol: {
    lg: {
      span: 5,
    },
  },
  wrapperCol: {
    lg: {
      span: 14,
    },
  },
};

class UpdateBase extends PureComponent {
  // 提交数据
  submitBaseData = () => {
    const { form, submitBaseData } = this.props;
    form.validateFields((err, values) => {
      if (!err) {
        submitBaseData(values);
      }
    });
  };

  render() {
    const {
      form: { getFieldDecorator },
      baseVisible,
      basicDto,
      handleModalBaseVisible,
    } = this.props;

    return (
      <Modal
        title="修改信息"
        visible={baseVisible}
        okText="保存"
        cancelText="取消"
        onOk={this.submitBaseData}
        onCancel={() => handleModalBaseVisible(false)}
        destroyOnClose
      >
        <Form>
          <Row>
            <Col span={24}>
              <FormItem label="电话" {...tableSearchLayout}>
                {getFieldDecorator('mobile', {
                  rules: [
                    {
                      required: true,
                      max: 100,
                      message: '请输入正确的手机号!',
                      pattern: /^1[34578]\d{9}$/,
                    },
                  ],
                  initialValue: basicDto.mobile,
                })(<Input />)}
              </FormItem>
            </Col>
          </Row>
          <Row>
            <Col span={24}>
              <FormItem label="邮箱" {...tableSearchLayout}>
                {getFieldDecorator('email', {
                  rules: [{ required: false, type: 'email', message: '请输入正确的邮箱!' }],
                  initialValue: basicDto.email,
                })(<Input />)}
              </FormItem>
            </Col>
          </Row>
        </Form>
      </Modal>
    );
  }
}
export default Form.create()(UpdateBase);
